<template>
  <header class="border-b border-gray-200 shadow-sm sticky top-0 z-50">
    <div class="max-w-6xl m-auto px-5 flex items-center justify-between h-16">
      <!-- Logo 或标题 -->
      <div class="logo">
        <NuxtLink
          to="/"
          class="text-2xl font-bold text-gray-800 hover:text-primary-600 transition-colors duration-300 no-underline"
        >
          {{ $t('welcome') }}
        </NuxtLink>
      </div>

      <!-- 导航菜单 -->
      <nav class="hidden md:flex gap-8">
        <NuxtLink
          to="/"
          class="text-gray-600 font-medium hover:text-primary-600 transition-colors duration-300 no-underline"
        >
          {{ $t('navigation.home') }}
        </NuxtLink>
        <NuxtLink
          to="/about"
          class="text-gray-600 font-medium hover:text-primary-600 transition-colors duration-300 no-underline"
        >
          {{ $t('navigation.about') }}
        </NuxtLink>
        <NuxtLink
          to="/contact"
          class="text-gray-600 font-medium hover:text-primary-600 transition-colors duration-300 no-underline"
        >
          {{ $t('navigation.contact') }}
        </NuxtLink>
        <NuxtLink
          to="/demo"
          class="text-gray-600 font-medium hover:text-primary-600 transition-colors duration-300 no-underline"
        >
          炫酷演示
        </NuxtLink>
      </nav>

      <!-- 语言切换器 -->
      <LanguageSwitcher />
    </div>
  </header>
</template>

<script setup>
import LanguageSwitcher from '../LanguageSwitcher/index.vue'
</script>
